:root {
    // Used as main colors for user interface and components
    --color-primary: #2b1265;
    --color-secondary: #220d4c;

    // Used as layout and text colors mainly
    --color-dark: #110707;
    --color-wolf-grey: #c5c7d0;
    --color-ui-grey: #e6e9ef;
    --color-riverstone: #f5f6f8;
    --color-white: #ffffff;

    // Used as gradient colors for main buttons
    --gradiant-electric-violet: #9314fe;
    --gradiant-majorelle-blue: #5148fc;
    --gradiant-blue-grayola: #447efd;
    --gradient-blue-jeans: #38affe;

    // Used as colors for signifying wrong and right indication for users
    --color-positive: #21bf73;
    --color-positive-hover: #22ae68;
    --color-positive-selected: #b6e8cc;

    --color-negative: #d83a52;
    --color-negative-hover: #b63546;
    --color-negative-selected: #f4c3cb;

    --color-warning: #FFCB00;
    --color-warning-2: #fdab3d;

    // Used as colors of the content while others are suggestions
    --color-russian-violoet: #180438;
    --color-maximum-blue-green: #5148fc;
    --color-blue-green: #83bd67;
    --color-blue-jeans: #38aefd;
    --color-blackish: #333333;
    --color-american-gray: #808080;
    --color-explosive: #c4c4c4;
    --color-winter: #9aadbd;
    --color-river: #68a1bd;
    --color-darkblue: #0086c0;
    --color-lightblue: #579bfc;
    --color-chillblue: #66ccff;
    --color-indigo: #5559df;
    --color-darkpurple: #784bd1;
    --color-purple-unknown: #7e3b8a;
    --color-purple: #a25ddc;
    --color-sofia-pink: #ff158a;
    --color-lipstick: #ff5ac4;
    --color-bubble: #faa1f1;

    // Elevation & Shadow
    --shadow--small-element: 0px 4px 8px rgba(0, 0, 0, 0.101025);
    --shadow--medium-element: 0px 8px 16px rgba(0, 0, 0, 0.166242);
    --shadow--larget-element: 0px 16px 24px rgba(0, 0, 0, 0.100091);

    // Rounded corners
    --border-radius-large-element: 16px;
    --border-radius-medium-element: 8px;
    --border-radius-small-element: 6px;
}
